<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/my-order.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/my-bill.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<style type="text/css">
			.mui-pull-top-pocket {
				top: 44px!important;
			}
			
			.return-header>h1 {
				line-height: 1.75rem!important;
			}
			.mui-table-view:after{
				background-color:#eaeef1
			}
		</style>
	</head>

	<body style="background: #eaeef1;">
		<header class="bar bar-nav return-header" style="width: 100%;">
			<span class="order-back mui-action-back"><img src="img/back-le.png" height="50%"/></span>
			<h1 class="title">我的账单</h1>
		</header>
		<div class="mui-content1">
			<!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<ul id="mui-table-view" class="mui-table-view mui-table-view-chevron" style="background-color: white;margin-top: 44px;">

					</ul>
				</div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var numP = 10
			var pageN = 1;
//			bill();
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					//					down: {
					//						callback: pulldownRefresh
					//					},
					up: {
						height:50,//可选.默认50.触发上拉加载拖动距离
					    auto:true,//可选,默认false.自动上拉加载一次
					    contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					    contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
					    callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			var count = 10;
			function pullupRefresh() {
				//				$('.mui-pull-caption').attr('visibility','hidden');
				numP = 10;
				pageN++;
				console.log('上拉加载更多');
				setTimeout(function() {
					bill();
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((count > localStorage.n)); //参数为true代表没有更多数据了。
				}, 1500);
			}

			function bill() {
				$.ajax({
					url: ur + '/mobilemember/frontmember/accountPayList',
					type: 'POST',
					headers: {
						"X-Token": localStorage.token,
					},
					dataType: 'json',
					data: {
						'numPerPage': numP,
						'pageNum': pageN,
						'pageRequest': '1'
					},
					success: function(data) {
						console.log(JSON.stringify(data))
						if(data.result.meta.code == 200) {
							localStorage.n = data.transactionVOs.length;
//							alert(localStorage.n+'localStorage.n')
							for(var i = 0; i < data.transactionVOs.length; i++) {
								var d = data.transactionVOs[i].txnDate.substring(0, 10);
								var t = data.transactionVOs[i].txnTime.substring(11, 19);
								var div = $('<div class="content" id="' + data.transactionVOs[i].id + '">' +
									'<div>' +
									'<p>' + d + '</p>' +
									'<p>' + t + '</p>' +
									'</div>' +
									'<div>' +
									'<p>-' + data.transactionVOs[i].goodsPrice + '</p>' +
									'<p>' + data.transactionVOs[i].orderName + '</p>' +
									'</div>' +
									'</div>'
								);
								$('#mui-table-view').append(div);
							}
						}
						if (data.result.meta.code == 201){
							var img = $('<p style="text-align: center;"><img style="width: 35%;margin-top: 80px;" src="img/nogood.png"/></p>'+
								'<p style="text-align: center;padding-bottom: 10px;">没有更多信息...</p>');
									$('#mui-table-view').append(img);
						}
					},
					error: function(e) {
						console.log(e);
					}
				})
			}
			$('.mui-content').on('tap', '.content', function() {
				localStorage.bill_id = $(this).attr('id');
				mui.openWindow({
					url: 'my-bill-de.html',
					id: 'my-bill-de.html',
					show: 'pop-in'
				})
			})
		</script>
	</body>

</html>